<div class="middle surface-shaded">
  <div class="middle-content">
    <div class="container gutter-top">
      <div class="col-md-12">
        <h1 style="margin-bottom: 5px;">Edit Project {{project.metadata.name}}</h1>
        <div class="help-block mar-bottom-lg">Update the display name and description of your project. The project's unique name cannot be modified.</div>
        <alerts alerts="alerts"></alerts>
        <form name="editProjectForm">
          <fieldset ng-disabled="disableInputs">
            <div class="form-group">
              <label for="displayName">Display Name</label>
              <input class="form-control input-lg"
                  name="displayName"
                  id="displayName"
                  placeholder="My Project"
                  type="text"
                  ng-model="editableFields.displayName">
            </div>

            <div class="form-group">
              <label for="description">Description</label>
              <textarea class="form-control input-lg"
                  name="description"
                  id="description"
                  placeholder="A short description."
                  ng-model="editableFields.description"></textarea>
            </div>

            <div class="button-group">
              <button type="submit"
                  class="btn btn-primary btn-lg"
                  ng-click="update()"
                  ng-disabled="editProjectForm.$invalid || disableInputs"
                  value="">Save</button>
              <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div><!-- /middle-content -->
</div><!-- /middle -->
